<template>
  <div class="Data_Assets_ZCGL">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="this.$route.query.Token ? 'top:50px;left:10px' : 'top: 100px'"
        >
          <el-container style="height:85%">
            <el-header style="height:150px">
              <el-card
                class="box-card"
                style="height:100%;width:22.5%;display:inline-block;margin:0.5%"
              >
                <p>ODS数据资产</p>
                <div>
                  <el-row>
                    <el-col :span="6">
                      <i
                        class="el-icon-s-cooperation"
                        style="font-size:56px;line-height: 150%;"
                      ></i>
                    </el-col>
                    <el-col :span="18">
                      <p>
                        <span style="font-size:26px">589.0 GB</span>
                        <span style="font-size:12px;color:#ccc;margin-left:5px"
                          >总数据容量</span
                        >
                      </p>
                      <p>
                        <span style="display:inline-block;width:33.33%"
                          >8个</span
                        >
                        <span style="display:inline-block;width:33.33%"
                          >206个</span
                        >
                        <span style="display:inline-block;width:33.33%"
                          >23个</span
                        >
                      </p>
                      <p style="margin-top:5px">
                        <span style="display:inline-block;width:33.33%"
                          >实例树</span
                        >
                        <span style="display:inline-block;width:33.33%"
                          >数据表</span
                        >
                        <span style="display:inline-block;width:33.33%"
                          >视图数</span
                        >
                      </p>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
              <el-card
                class="box-card"
                style="height:100%;width:23.5%;display:inline-block;margin:10px"
              >
                <p>CDR数据资产</p>
                <div>
                  <el-row>
                    <el-col :span="6">
                      <i
                        class="el-icon-s-cooperation"
                        style="font-size:56px;line-height: 150%;"
                      ></i>
                    </el-col>
                    <el-col :span="18">
                      <p>
                        <span style="font-size:26px">152.0 GB</span>
                        <span style="font-size:12px;color:#ccc;margin-left:5px"
                          >总数据容量</span
                        >
                      </p>
                      <p>
                        <span style="display:inline-block;width:33.33%"
                          >9个</span
                        >
                        <span style="display:inline-block;width:33.33%"
                          >69个</span
                        >
                        <span style="display:inline-block;width:33.33%"
                          >0个</span
                        >
                      </p>
                      <p style="margin-top:5px">
                        <span style="display:inline-block;width:33.33%"
                          >实例树</span
                        >
                        <span style="display:inline-block;width:33.33%"
                          >数据表</span
                        >
                        <span style="display:inline-block;width:33.33%"
                          >视图数</span
                        >
                      </p>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
              <el-card
                class="box-card"
                style="height:100%;width:23.5%;display:inline-block;margin:10px"
              >
                <p>MDR数据资产</p>
                <div>
                  <el-row>
                    <el-col :span="6">
                      <i
                        class="el-icon-s-cooperation"
                        style="font-size:56px;line-height: 150%;"
                      ></i>
                    </el-col>
                    <el-col :span="18">
                      <p>
                        <span style="font-size:26px">69.9 GB</span>
                        <span style="font-size:12px;color:#ccc;margin-left:5px"
                          >总数据容量</span
                        >
                      </p>
                      <p>
                        <span style="display:inline-block;width:33.33%"
                          >9个</span
                        >
                        <span style="display:inline-block;width:33.33%"
                          >143个</span
                        >
                        <span style="display:inline-block;width:33.33%"
                          >0个</span
                        >
                      </p>
                      <p style="margin-top:5px">
                        <span style="display:inline-block;width:33.33%"
                          >实例树</span
                        >
                        <span style="display:inline-block;width:33.33%"
                          >数据表</span
                        >
                        <span style="display:inline-block;width:33.33%"
                          >视图数</span
                        >
                      </p>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
              <el-card
                class="box-card"
                style="height:100%;width:23.5%;display:inline-block;margin:10px"
              >
                <p>RDR数据资产</p>
                <div>
                  <el-row>
                    <el-col :span="6">
                      <i
                        class="el-icon-s-cooperation"
                        style="font-size:56px;line-height: 150%;"
                      ></i>
                    </el-col>
                    <el-col :span="18">
                      <p>
                        <span style="font-size:26px">111.0 GB</span>
                        <span style="font-size:12px;color:#ccc;margin-left:5px"
                          >总数据容量</span
                        >
                      </p>
                      <p>
                        <span style="display:inline-block;width:33.33%"
                          >8个</span
                        >
                        <span style="display:inline-block;width:33.33%"
                          >30个</span
                        >
                        <span style="display:inline-block;width:33.33%"
                          >0个</span
                        >
                      </p>
                      <p style="margin-top:5px">
                        <span style="display:inline-block;width:33.33%"
                          >实例树</span
                        >
                        <span style="display:inline-block;width:33.33%"
                          >数据表</span
                        >
                        <span style="display:inline-block;width:33.33%"
                          >视图数</span
                        >
                      </p>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-header>
            <el-main>
              <div style="height:5%">
                <span style="float:left">数据跨度</span>
                <span style="float:right">更新时间：2021-11-16</span>
              </div>
              <div class="main_style">
                <div
                  id="main"
                  :style="{ width: '100%', height: '500px' }"
                ></div>
              </div>
            </el-main>
            <el-footer>
              <h4>业务板块</h4>
              <div style="overflow-x:auto;width:100%;white-space:nowrap">
                <el-card
                  class="box-card"
                  style="display:inline-block;width:16.6%;margin:0 10px;padding:0"
                >
                  <h3
                    style="background-color:#330099;color:#fff;text-align:center;padding:5px 0;margin-top:-5px"
                  >
                    字典
                  </h3>
                  <p style="text-align:center">模型数量9个</p>
                </el-card>
                <el-card
                  class="box-card"
                  style="display:inline-block;width:16.6%;margin:0 10px;padding:0"
                >
                  <h3
                    style="background-color:#006600;color:#fff;text-align:center;padding:5px 0;margin-top:-5px"
                  >
                    就诊
                  </h3>
                  <p style="text-align:center">模型数量5个</p>
                </el-card>
                <el-card
                  class="box-card"
                  style="display:inline-block;width:16.6%;margin:0 10px;padding:0"
                >
                  <h3
                    style="background-color:#ff6600;color:#fff;text-align:center;padding:5px 0;margin-top:-5px"
                  >
                    医技
                  </h3>
                  <p style="text-align:center">模型数量5个</p>
                </el-card>
                <el-card
                  class="box-card"
                  style="display:inline-block;width:16.6%;margin:0 10px;padding:0"
                >
                  <h3
                    style="background-color:#ff0099;color:#fff;text-align:center;padding:5px 0;margin-top:-5px"
                  >
                    护理
                  </h3>
                  <p style="text-align:center">模型数量4个</p>
                </el-card>
                <el-card
                  class="box-card"
                  style="display:inline-block;width:16.6%;margin:0 10px;padding:0"
                >
                  <h3
                    style="background-color:#0066ff;color:#fff;text-align:center;padding:5px 0;margin-top:-5px"
                  >
                    档案
                  </h3>
                  <p style="text-align:center">模型数量3个</p>
                </el-card>
                <el-card
                  class="box-card"
                  style="display:inline-block;width:16.6%;margin:0 10px;padding:0"
                >
                  <h3
                    style="background-color:#660099;color:#fff;text-align:center;padding:5px 0;margin-top:-5px"
                  >
                    医嘱
                  </h3>
                  <p style="text-align:center">模型数量2个</p>
                </el-card>
                <el-card
                  class="box-card"
                  style="display:inline-block;width:16.6%;margin:0 10px;padding:0"
                >
                  <h3
                    style="background-color:#6600ff;color:#fff;text-align:center;padding:5px 0;margin-top:-5px"
                  >
                    患者
                  </h3>
                  <p style="text-align:center">模型数量1个</p>
                </el-card>
              </div>
            </el-footer>
          </el-container>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "Email",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Union Ads",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "Video Ads",
            type: "bar",
            stack: "Ad",
            emphasis: {
              focus: "series",
            },
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "Search Engine",
            type: "bar",
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
            emphasis: {
              focus: "series",
            },
            markLine: {
              lineStyle: {
                type: "dashed",
              },
              data: [[{ type: "min" }, { type: "max" }]],
            },
          },
          {
            name: "Baidu",
            type: "bar",
            barWidth: 5,
            stack: "Search Engine",
            emphasis: {
              focus: "series",
            },
            data: [620, 732, 701, 734, 1090, 1130, 1120],
          },
          {
            name: "Google",
            type: "bar",
            stack: "Search Engine",
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 290, 230, 220],
          },
          {
            name: "Bing",
            type: "bar",
            stack: "Search Engine",
            emphasis: {
              focus: "series",
            },
            data: [60, 72, 71, 74, 190, 130, 110],
          },
          {
            name: "Others",
            type: "bar",
            stack: "Search Engine",
            emphasis: {
              focus: "series",
            },
            data: [62, 82, 91, 84, 109, 110, 120],
          },
        ],
      });
    },
  },
  mounted() {
    // document.getElementById("2").focus();
    this.drawLine();
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
  },
};
</script>
<style lang="scss" scoped>
.Data_Assets_ZCGL {
  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
  .card_style {
    height: 100%;
    width: 25%;
    display: inline-block;
  }
  .main_style {
    width: 100%;
    height: 95%;
  }
}
</style>
